<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./dist/vue.js"></script>
</head>
<body>
    <!-- 
        v-if / v-else-if / v-else /v-show
        v-if 是真正的渲染，v-show 是全部渲染出来，只是css样式的改变 -- 审查元素时可以看出来
     -->
     <div id="app">
        <!-- if 和 else 只能渲染一个 -->
           <div v-if="flag">真真</div>
           <div v-else>假假</div>
        <!-- 两个div都是渲染出来的，只是 第二个div 添加了 style="display: none;" -->
           <div v-show="flag">真真真</div>
           <div v-show="!flag">假假假</div>
        <!-- v-if 结合 key值的使用 (用key管理可复用的元素)  (没有key时会导致label切换时，input里的值不会清空)-->
            <template v-if="loginType == 'username'">
                <label for="">用户名</label>
                <input type="text" placeholder="输入用户名"/>
            </template> 
            <template v-if="loginType == 'email'">
                <label for="">邮箱</label>
                <input type="text" placeholder="输入邮箱"/>
            </template>
        <!-- 要复用的是input，所以给input标签添加一个key (添加了key之后，输入框的内容就不会共用了) -->
            <template v-if="loginType == 'username'">
                <label for="">用户名</label>
                <input type="text" placeholder="输入用户名" key="username" />
            </template> 
            <template v-if="loginType == 'email'">
                <label for="">邮箱</label>
                <input type="text" placeholder="输入邮箱" key="email" />
            </template>
     </div>
</body>
<script>
    const vm = new Vue({
        el:'#app',
        data:{
            flag:true,
            loginType:'username',
        }
    })
</script>
</html>